<template>
	<view class="content">
		<view class="top-bar">
			<view class="top-bar-left" @tap="backOnePage">
				<image class="back" src="../../static/images/common/back.png" mode=""></image>
			</view> 
			<view class="top-bar-center">
				<view class="title">
					好友请求
				</view>
			</view>
			<view class="top-bar-right">
				<view class="pice">
					
				</view>
			</view>
		</view>	
		<view class="main">
			<view class="requester" v-for="(item,index) in requesters" :key="index">
				<view class="request-top">
					<view class="reject btn">
						拒绝
					</view>
					<view class="head">
						<image :src="item.img" mode="aspectFit"></image>						
					</view>
					<view class="aggree btn">
						同意
					</view>
				</view>
				<view class="request-center">
					<view class="title">
						{{item.name}}
					</view>
					<view class="time">
						{{item.time}}
					</view>
				</view>
				<view class="notic">
					<text>留言：</text>
					你好，请求添加好友。从此便是亲密无间咯~ (> * <) ~
					{{item.news}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import datas from '../../commons/js/datas.js'
	import myfunction from '../../commons/js/myfunction.js'
	export default { 
		data() {
			return {
				requesters:[],
			};
		},
		onLoad:function(){
			this.getRequest();
		},
		methods:{
			//返回上一个页面
			backOnePage: function() {
				uni.navigateBack({
					detail: 1,
				})
			},
			// 修改时间
			changeTime:function(date){
				return myfunction.dateTime(date);
			},
			//获取好友列表
			getRequest:function(){
				this.requesters=datas.friend();
				this.requesters.forEach((item,index)=>{
					item.img = "../../static/images/img/"+item.imgurl;
					item.time = this.changeTime(item.time);
				})
				//console.log(this.friends);
			},
		}
	}
</script>

<style lang="scss">
	@import "../../commons/css/mycss.scss";
	.top-bar {
		background: rgba($color: #fff, $alpha: 0.96);
		border-bottom: 1px solid $uni-border-color;
	}
	.main{
		padding: 108rpx $uni-spacing-col-base;
		.requester{
			margin: 112rpx 0 20rpx;
			padding: $uni-spacing-col-base;
			background-color: #fff;
			box-shadow: 0px 24rpx 64rpx -8rpx rgba($color: #000, $alpha: 0.10);
			border-radius: $uni-border-radius-base;
			//border: 1px solid $uni-border-color;
		}
		.request-top{
			display: flex;
			flex-direction: row;
			.btn{
				text-align: center;
				flex: none;
				width: 160rpx;
				height: 64rpx;
				background: rgba(255,93,91,0.1);
				border-radius: 40rpx;
				font-size: $uni-font-size-lg;
				line-height: 64rpx;
			}
			.reject{
				color: $uni-color-warning;
				background: rgba(255,93,91,0.1);
			}
			.aggree{
				color: $uni-text-color;
				background: $uni-color-primary;
			}
			.head{
				flex: auto;
				text-align: center;
				image{
					margin-top: -104rpx;
					width: 144rpx;
					height: 144rpx;
					border-radius: $uni-border-radius-circle;
					background-color: $uni-color-primary;
				}
				
			}
		}
		.request-center{
			text-align: center;
			padding-top: 20rpx;
			padding-bottom: 40rpx;
			.title{
				font-size: 36rpx;
				font-weight: 500;
				color: $uni-text-color;
				line-height: 50rpx;
			}
			.time{
				font-size: $uni-font-size-sm;
				color: $uni-text-color-disable;
				line-height: 34rpx;
			}
		}
		.notic{
			padding: 20rpx 32rpx;
			border-radius: $uni-border-radius-base;
			background-color: $uni-bg-color-grey;
			font-size: $uni-font-size-base;
			color: $uni-text-color;
			line-height: 40rpx;
		}
	}

</style>
